<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body style="width: 100%; height: 100vh">
    <div
      id="div"
      style="width: 400px; height: 100vh; background-color: burlywood"
    ></div>

    <button id="btn1">点我</button>
  </body>
  <script>
    // 如果div是最里面的元素，即是处在目标阶段，则先绑定的先触发，与第三个参数无关
    // '冒泡div'比'捕获div'先输出
    // document.addEventListener(
    //   "click",
    //   () => {
    //     console.log("捕获document");
    //   },
    //   true
    // );
    // document.body.addEventListener(
    //   "click",
    //   () => {
    //     console.log("捕获body");
    //   },
    //   true
    // );

    // const div = document.querySelector("div");

    // div.addEventListener(
    //   "click",
    //   () => {
    //     console.log("冒泡div");
    //   },
    //   false
    // );
    // div.addEventListener(
    //   "click",
    //   () => {
    //     console.log("捕获div");
    //   },
    //   true
    // );

    // document.body.addEventListener(
    //   "click",
    //   () => {
    //     console.log("冒泡body");
    //   },
    //   false
    // );
    // document.addEventListener(
    //   "click",
    //   () => {
    //     console.log("冒泡document");
    //   },
    //   false
    // );

    //都是body，都是在冒泡阶段 输出 click1、click2、 click3，谁先绑定谁就先触发
    // document.body.addEventListener("click", () => {
    //   console.log("click1");
    // });
    // document.body.onclick = () => {
    //   console.log("click2");
    // };
    // document.body.addEventListener("click", () => {
    //   console.log("click3");
    // });

    // 前面两个事件绑定将不会触发
    var btn1 = document.getElementById("btn1");
    btn1.onclick = (e) => {
      console.log("onclick-btn", e.eventPhase);
    };
    btn1.addEventListener(
      "click",
      (e) => {
        console.log("冒泡btn", e.eventPhase);
      },
      false
    );
    btn1.addEventListener(
      "click",
      (e) => {
        console.log("捕获btn", e.eventPhase);
        //e.stopPropagation();
      },
      true
    );
  </script>
</html>
